<!DOCTYPE html>
<html>
<head>
    <title>Jia Family: Initial vs Final Utility Values</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .chart-container {
            width: 900px;
            height: 600px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="chart-container">
        <canvas id="utilityBarChart"></canvas>
    </div>

    <script>
        const ctx = document.getElementById('utilityBarChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                    'Grand View Garden',
                    'Household Staff',
                    'Social Events',
                    'Luxury Goods',
                    'Estate Maintenance',
                    'Cultural Activities'
                ],
                datasets: [{
                    label: 'Initial Utility Value',
                    data: [95, 90, 85, 88, 82, 80],
                    backgroundColor: '#36A2EB',
                    borderColor: '#2693e6',
                    borderWidth: 1
                }, {
                    label: 'Final Utility Value',
                    data: [30, 35, 25, 20, 15, 10],
                    backgroundColor: '#FF6384',
                    borderColor: '#ff4b74',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'Initial vs Final Utility Values of Major Expenditures',
                        font: {
                            size: 16
                        }
                    },
                    legend: {
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.raw + ' utility points';
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Utility Value (0-100)'
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Expenditure Categories'
                        }
                    }
                }
            }
        });
    </script>
</body>
</html>